import {
  ActionType,
  ModalForm,
  PageContainer,
  ProColumns,
  ProForm,
  ProFormDatePicker,
  ProFormDigit,
  ProFormSwitch,
  ProTable
} from "@ant-design/pro-components";
import {Button, Form, Switch} from "antd";
import React, {useRef, useState} from "react";
import {CheckOutlined, CloseOutlined, EditOutlined, PlusOutlined, SettingFilled} from "@ant-design/icons";
import {globalLoadTableApi, handleGloblApi} from "@/services/admin-api/globalApi";

type WorkTime = {
  wtId: number;
  workerId: number;
  workerName: string;
  morning: boolean;
  noon: boolean;
  afternoon: boolean;
  wtDate: string;
  delFlag: boolean;
  createTime: string;
  createUserId: number;
  createUserName: string;
  updateTime: string;
  updateUserId: number;
  updateUserName: string;
};

export default () => {

  const [modalOpen, handleModalOpen] = useState(false);
  const [form] = Form.useForm();
  const actionRef = useRef<ActionType>();

  const WorkTimeSwitch = (props: { val: boolean, wtId: number, type: string }) => {
    return <Switch
      checked={props.val} checkedChildren={<CheckOutlined/>} unCheckedChildren={<CloseOutlined/>}
      onChange={async (checked: boolean) => {
        const r = await handleGloblApi('/dispatch/workTime/modifySwitch', {
          wtId: props.wtId,
          [props.type]: checked
        })
        if (r) {
          actionRef.current?.reload()
        }
      }}/>
  }

  const columns: ProColumns<WorkTime>[] = [
    // {title: '', valueType: 'indexBorder'},
    {title: 'ID', dataIndex: 'wtId', valueType: 'digit'},
    // {title: '工作人员ID', dataIndex: 'workerId', valueType: 'digit'},
    {title: '服务人员', dataIndex: 'workerName', valueType: 'text'},
    {title: '日期', dataIndex: 'wtDate', valueType: 'date', hideInSearch: true,},
    {
      title: '日期', dataIndex: 'wtDate', valueType: 'dateRange', hideInTable: true, search: {
        transform: (value) => {
          return {wtDateStart: value[0], wtDateStartEnd: value[1],};
        },
      },
    },
    {
      // title: '上午(7:00-11:59)',
      title: (_, type) => type === 'table' ? '上午(8:00-11:59)' : '上午',
      // tooltip: '(7:00-11:59)',
      dataIndex: 'morning',
      valueType: 'select',
      fieldProps: {label: '上午', options: [{label: '没空', value: false}, {label: '有空', value: true}]},
      render: (_, record) => <WorkTimeSwitch val={record.morning} wtId={record.wtId} type={"morning"}/>
    },
    {
      // title: '中午(12:00-17:59)',
      title: (_, type) => type === 'table' ? '中午(12:00-17:59)' : '中午',
      dataIndex: 'noon',
      valueType: 'select',
      fieldProps: {label: '中午', options: [{label: '没空', value: false}, {label: '有空', value: true}]},
      render: (_, record) => <WorkTimeSwitch val={record.noon} wtId={record.wtId} type={"noon"}/>
    },
    {
      // title: '下午(<7:00->18:00)',
      title: (_, type) => type === 'table' ? '下午(<8:00 >18:00)' : '下午',
      dataIndex: 'afternoon',
      valueType: 'select',
      fieldProps: {label: '下午', options: [{label: '没空', value: false}, {label: '有空', value: true}]},
      render: (_, record) => <WorkTimeSwitch val={record.afternoon} wtId={record.wtId} type={"afternoon"}/>
    },
    {title: '创建时间', dataIndex: 'createTime', valueType: 'dateTime', hideInSearch: true,},
    {title: '创建用户ID', dataIndex: 'createUserId', valueType: 'digit', hideInSearch: true,},
    {title: '创建用户', dataIndex: 'createUserName', valueType: 'text', hideInSearch: true,},
    {title: '更新时间', dataIndex: 'updateTime', valueType: 'dateTime', hideInSearch: true,},
    {title: '更新用户ID', dataIndex: 'updateUserId', valueType: 'digit', hideInSearch: true,},
    {title: '更新用户', dataIndex: 'updateUserName', valueType: 'text', hideInSearch: true,},
    {
      title: <SettingFilled/>,
      render: (_, record) => [
        <Button
          key={'edit_' + record.wtId} size="small" icon={<EditOutlined/>} type="primary"
          onClick={async () => {
            form.setFieldsValue({...record});
            handleModalOpen(true);
          }}
        />,
      ],
      valueType: 'option',
    },
  ];

  return <PageContainer header={{title: '', breadcrumb: {},}}>
    <ProTable<WorkTime>
      columns={columns} actionRef={actionRef}
      search={{span: 4}}
      headerTitle={
        <Button
          key="primary" type="primary" icon={<PlusOutlined/>} onClick={() => {
          handleModalOpen(true)
        }}/>
      }
      request={async (param) => globalLoadTableApi('/dispatch/workTime/table', param)}
      rowKey={(record) => record.wtId}
      columnsState={{
        defaultValue: {
          delFlag: {show: false},
          createUserId: {show: false},
          updateUserId: {show: false}
        }
      }}/>

    <ModalForm
      modalProps={{destroyOnClose: true}} autoFocusFirstInput submitTimeout={15000}
      width="400px" open={modalOpen} onOpenChange={handleModalOpen} form={form}
      onFinish={async (value) => {
        console.log('value = ', value);
        let success = await handleGloblApi('/dispatch/workTime/saveOrUpdate', value)

        if (success) {
          actionRef.current?.reload();
          return true
        }

      }}
    >
      <ProFormDigit label="wtId" name="wtId" hidden/>
      <ProFormDigit label="工作人员ID" rules={[{required: true}]} name="workerId"/>
      <ProFormDatePicker name="wtDate" rules={[{required: true}]} label="日期"/>

      <ProForm.Group>
        <ProFormSwitch name="morning" label="上午" tooltip={"7:00点-12:59点"} initialValue={false}/>
        <ProFormSwitch name="noon" label="中午" tooltip={"13:00点-18:59点"} initialValue={false}/>
        <ProFormSwitch name="afternoon" label="下午" tooltip={">19:00点 || <6:59点"} initialValue={false}/>
      </ProForm.Group>

    </ModalForm>

  </PageContainer>
}
